<template>
    <!-- 抽屉 -->
    <el-drawer v-model="drawer" title="用户信息" :with-header="false" size="50%">

        <!-- 未登录时展现的样式 -->
        <div class="un-login-container" v-if="!userStore.loginState">
            <el-button @click="toLogin">登录</el-button>
        </div>

        <!-- 登录成功时展现的样式 -->
        <div class="login-container" v-else>
            <Cropper ref="cropper"/>
            <div class="login-container-header" :style="headerBackgroundStyle">
                <el-avatar :size="80" class="login-container-avatar">
                    <img :src="userStore.user.avatar" @click="cropperControl"/>
                </el-avatar>
                <div class="login-container-gold">
                    <img src="@/assets/svg/gold.svg">
                    <span>：0</span>
                </div>
                <el-button @click="logout">登出</el-button>
            </div>
            <div class="login-container-main">
                <Collapse/>
            </div>
            <div class="login-container-footer">
            </div>
        </div>
        <!-- <el-button @click="toTest">token测试</el-button> -->
    </el-drawer>
</template>

<script setup lang="ts">
import { ref} from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '废弃组件/store/useUserStore';
import request from '@/router/request'
import {ElMessage} from 'element-plus'
import Cropper from '废弃组件/components/Cropper.vue'
import type JsonResult from '@/interfaces/JsonResult'
import Collapse from '@/components/navigator/Collapse.vue'
import { userLogout } from '@/api/login';


const drawer = ref(false)
const router = useRouter()
const userStore = useUserStore()
const cropper = ref()

// 头部背景图片
const headerImageUrl = ref("#")

const headerBackgroundStyle = ref({
    backgroundImage: `url(${headerImageUrl.value})`,
    backgroundSize: 'cover',
    backgroundPosition: 'center'
})
// 函数
/**
 * 控制裁剪弹框显示
 */
const cropperControl = ()=>{
    cropper.value.dialogVisible = true
}
/**
 * 跳转登录页面
 */
function toLogin(){
    ElMessage.warning("优化维护中,敬请期待!")
    // router.push("/login")
}
async function toTest(){
    try{
        // const response:JsonResult =  await request.get("/admin/user/1");
        // const response:JsonResult =  await request.get("/test/permit");
        // const response:JsonResult =  await request.get("/test/principal");
        const response:JsonResult =  await request.get("/test/create-account");
        if(response.state==200){
            ElMessage.success(response.data)
        }else{
            ElMessage.warning(response.message)
        }
        
    }catch(err:any){
        ElMessage.error(err)
    }
}
/**
 * 登出
 */
async function logout(){
    const json = await userLogout(userStore.user.id) 
    if(json.state==200){
        userStore.loginState=false
        ElMessage.success(json.data)
    }else{
        ElMessage.warning(json.message)
    }
}

//把数据交给外部
defineExpose({drawer})
</script>
<style scoped>
.un-login-container{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.login-container-header{
    display: flex;
    align-items: self-end;
    justify-content: space-between;
}
.login-container-avatar{
    cursor: pointer;
}
.login-container-gold{
    display: flex;
    position: absolute;
    right: 20px;
    top: 20px;
}
</style>